import { useEffect, useState, useReducer, useContext, useRef } from 'react'


import { createThemeConfigDB,getLocalThemeDB } from "@/api/indexedDB";
import { genNonDuplicateID } from "@/tool/util";
import { global } from '@/config/settings';


export default function () {

  // 本地模版数据
  const [localTheme, setLocalTheme] = useState([]);

  useEffect(()=>{
    getLocalThemeDB().then((result)=>{
      setLocalTheme(result)
    })

  },[])

  function handleAddTheme() {
    var id = genNonDuplicateID(12);
    createThemeConfigDB({ id: id, data: [], config: { "name": "null" } }, global);
    location.href = "/editor/" + id
  }

  function handleEditTheme(theme){
    location.href = "/editor/" + theme.id
  }

  return <div className="w-screen h-screen gap-8 items-center flex justify-center">
    {/* <div className="w-1/5 h-1/3 bg-cyan-500 md:transition-all hover:-mt-4 shadow-lg shadow-cyan-500/50 rounded-lg cursor-pointer">
      <div className="w-full h-full p-6 box-border text-white gap-6 flex flex-col items-center justify-center">
        <svg t="1689322421739" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15914" width="48" height="48"><path d="M512.064 472.725333a64 64 0 0 1-26.666667-6.954666L147.861333 306.922667a56.256 56.256 0 0 1 0-102.784l320.768-151.786667a101.909333 101.909333 0 0 1 86.613334 0l320.896 151.786667a56.256 56.256 0 0 1 0 102.784l-337.536 158.741333a61.866667 61.866667 0 0 1-26.538667 7.061333zM424.896 988.373333a52.544 52.544 0 0 1-24.832-6.272l-304.938667-142.933333a57.92 57.92 0 0 1-31.061333-52.053333V422.464a58.432 58.432 0 0 1 28.608-49.792 53.333333 53.333333 0 0 1 52.522667 0l304.362666 142.933333a59.221333 59.221333 0 0 1 30.890667 49.792v365.077334a59.008 59.008 0 0 1-28.373333 49.792 57.002667 57.002667 0 0 1-27.178667 8.085333z m174.229333 0a55.466667 55.466667 0 0 1-27.114666-7.189333 59.008 59.008 0 0 1-28.373334-49.792V565.248a58.666667 58.666667 0 0 1 29.866667-49.792l306.410667-143.808a52.8 52.8 0 0 1 51.498666 1.258667 58.026667 58.026667 0 0 1 28.650667 49.792v364.416a57.941333 57.941333 0 0 1-29.866667 51.968l-306.069333 143.125333a51.882667 51.882667 0 0 1-25.002667 6.144z" fill="#ffffff" p-id="15915"></path></svg>
        <span className="text-lg font-bold">更改模版</span>
      </div>
    </div> */}
    <div className="w-1/5 h-1/3 rounded-lg md:transition-all cursor-pointer bg-blue-500 hover:-mt-4 shadow-lg shadow-blue-500/50">
      <div onClick={handleAddTheme} className="w-full h-full p-6 box-border text-white gap-6 flex flex-col items-center justify-center">
        <svg t="1689322099051" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15774" width="48" height="48"><path d="M373.461333 557.738667a94.464 94.464 0 0 1 94.485334 94.442666v234.666667a94.464 94.464 0 0 1-94.485334 94.421333H138.581333a94.464 94.464 0 0 1-94.485333-94.4v-234.666666a94.464 94.464 0 0 1 94.485333-94.421334z m518.4 0a94.464 94.464 0 0 1 94.485334 94.442666v234.666667a94.464 94.464 0 0 1-94.485334 94.421333h-234.88a94.464 94.464 0 0 1-94.485333-94.442666v-234.666667a94.464 94.464 0 0 1 94.485333-94.421333z m-117.333333-504.533334a211.84 211.84 0 1 1-0.192 0z m-400.896 0a94.464 94.464 0 0 1 94.485333 94.442667v234.666667a94.464 94.464 0 0 1-94.485333 94.421333H138.581333a94.464 94.464 0 0 1-94.485333-94.4v-234.666667a94.464 94.464 0 0 1 94.506667-94.464z" fill="#fff" p-id="15775"></path></svg>
        <span className="text-lg font-bold">创建模版</span>
      </div>
    </div>
    <div className="w-1/5 h-1/3">
      {/* onClick={handleAddTheme}  */}

      <div className='flex flex-col gap-4'>
        {localTheme.map(theme => <div key={theme.id} onClick={()=>{handleEditTheme(theme)}}  className='rounded-full w-full box-border md:transition-all hover:ml-6 px-5 py-2 bg-blue-50 cursor-pointer'>
          <span className="">{theme.config.name}</span>
        </div>)}


        {/* <span className="rounded-full  px-5 py-2 bg-blue-50">模版名称</span> */}
      </div>
      {/* <div className="px-3 py-2 box-border bg-blue-50 inline-block flex-col items-center justify-center">
        <span className="font-bold">模版名称</span>
      </div> */}
    </div>
  </div>
}